import React, { useState, useContext } from "react";
import FormContext from "../../context/user/formContext";
import GoodsCheckContext from "../../context/user/goodsCkeckContext";
import Dropdown from "../../components/dropdown";
import ShowList from "../../components/showList";
import FilterModal from "../../components/FilterModal";
import ScrollHead from "../../components/ScrollHead";
import MaterialContext from "../../context/suppiler/materialContext";
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  Platform,
  StatusBar,
  ScrollView,
} from "react-native";

const dimen = Dimensions.get("window");
const width = dimen.width;

const GoodsCheckScreen = ({ navigation, route }) => {
  const { page } = route.params;
  const { formData } = useContext(FormContext);
  // console.log("刷新formData---", formData[0]);
  const { isLoading, queryData, sortPrice } = useContext(GoodsCheckContext);
  // console.log("刷新queryData---", queryData[1]);
  const { material } = useContext(MaterialContext);
  // formData[currentPage].detail.basePlate.category[0]
  const categories = material.map((item) => {
    return item.category;
  });

  const [currentPage, setPage] = useState(page);
  // console.log("刷新queryData111---", queryData[1]);

  const [querySort, setSort] = useState(0);
  const [areaKey, setArea] = useState([0, "全国"]);

  const processOptions = (arr) => {
    let options = ["任意型号"];
    arr.map((item) => {
      options.push(item.type);
    });
    return options;
  };

  const tagList = [
    {
      title:
        "基板" + " - " + formData[currentPage].detail.basePlate.category[1],
      itemList: processOptions(
        material[formData[currentPage].detail.basePlate.category[0]].types
      ),
    },
    {
      title:
        "覆板" + " - " + formData[currentPage].detail.shroudPlate.category[1],
      itemList: processOptions(
        material[formData[currentPage].detail.shroudPlate.category[0]].types
      ),
    },
  ];

  const setIndex = (index) => {
    setPage(index);
  };

  const clickSort = () => {
    if (querySort < 2) {
      setSort(querySort + 1);
    } else {
      setSort(0);
    }
    sortPrice(currentPage, querySort);
  };

  const [Filter, setFilter] = useState([-1, -1]);
  const onSave = (data) => {
    setFilter(data);
    console.log("-----", Filter);
  };

  const filterArea = (area) => {
    return areaKey[1] == "全国" || area;
  };
  const filterType = (base_type, shroud_type) => {
    let filterBase =
      Filter[0] < 1 || tagList[0].itemList[Filter[0]] == base_type;
    let filterShroud =
      Filter[1] < 1 || tagList[1].itemList[Filter[1]] == shroud_type;
    // console.log("选项二---", filterShroud);
    return filterBase && filterShroud;
  };

  return (
    <View style={styles.container}>
      <ScrollHead
        initData={{
          showDelete: false,
          showPlus: false,
          headData: formData,
          initPage: currentPage,
        }}
        onSelect={(index) => {
          setIndex(index);
        }}
      ></ScrollHead>
      <View style={{ flexDirection: "row" }}>
        <TouchableOpacity style={{ height: 45 }} onPress={clickSort}>
          <View
            style={{
              marginTop: 10,
              flexDirection: "row",
              alignContent: "center",
              justifyContent: "center",
              width: width / 3,
            }}
          >
            <Text style={{ fontSize: 15 }}>价格</Text>
            {querySort == 0 ? (
              <Image
                style={{ width: 15, height: 15, marginLeft: 5, marginTop: 2 }}
                source={require("../../../assets/moren.png")}
              />
            ) : (
              <Image
                style={{ width: 15, height: 15, marginLeft: 5, marginTop: 2 }}
                source={
                  querySort == 1
                    ? require("../../../assets/shengxu.png")
                    : require("../../../assets/jiangxu.png")
                }
              />
            )}
          </View>
        </TouchableOpacity>
        <View style={{ width: width / 3, alignItems: "center", height: 45 }}>
          <Dropdown
            ifFirst={2}
            initialValues={{
              initKey: areaKey[0],
              initOptions: [
                "全国",
                "北京",
                "上海",
                "广州",
                "深圳",
                "重庆",
                "西安",
                "安康",
                "上海",
                "四川",
              ],
            }}
            initialStyles={{
              valueWith: 70,
              optionsMarginTop: 90,
              optionsBackGroundColor: "#f1f1f1",
              optionsBorderColor: "#ccc",
            }}
            onSelect={(item, value) => {
              // console.log("+++", item, value);
              setArea([value, item]);
            }}
          ></Dropdown>
        </View>
        {/* <TouchableOpacity>
          <View
            style={{
              marginTop: 10,
              flexDirection: "row",
              alignContent: "center",
              justifyContent: "center",
              width: width / 3,
            }}
          >
            <Text style={{ fontSize: 15 }}>类型</Text>
            <Image
              style={{ width: 17, height: 17, marginLeft: 5, marginTop: 2 }}
              source={require("../../assets/leixing.png")}
            />
          </View>
        </TouchableOpacity> */}
        <View
          style={{
            alignItems: "center",
            marginTop: 10,
            width: width / 3,
          }}
        >
          <FilterModal tagList={tagList} onSave={onSave} />
        </View>
      </View>
      {isLoading ? (
        <View style={{ justifyContent: "center", flex: 1 }}>
          <ActivityIndicator size="small" color="#0000ff" />
          {/* <Text>加载</Text> */}
        </View>
      ) : (
        <ScrollView
          vertical={true}
          showsVerticalScrollIndicator={true} // 隐藏垂直指示器
        >
          <View style={{ alignItems: "center" }}>
            <View
              style={{
                flexDirection: "column",
                marginBottom: 100,
                justifyContent: "center",
              }}
            >
              {queryData[1][currentPage].map((item, index) => {
                return filterArea(item.company.address.includes(areaKey[1])) &&
                  filterType(item.basePlate.type, item.shroudPlate.type) ? (
                  <ShowList
                    key={index}
                    showData={{
                      image: item.image,
                      title:
                        item.basePlate.category +
                        item.basePlate.type +
                        "*" +
                        item.shroudPlate.category +
                        item.shroudPlate.type,
                      price: item.price,
                      company: item.company.company_name,
                    }}
                    onQuery={() =>
                      navigation.navigate("GoodsDetail", { queryDetail: item })
                    }
                  ></ShowList>
                ) : null;
              })}
            </View>
            <View style={{ marginTop: 110 }}>
              <Text style={{ fontSize: 14, color: "#999" }}>
                {queryData[1][currentPage].length
                  ? "已经到底了哦 > ^ <"
                  : "暂无数据"}
              </Text>
            </View>
          </View>
        </ScrollView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fff",
  },
});

export default GoodsCheckScreen;
